import { View } from '@tarojs/components';
import { Children, FC, ReactNode, useState, } from 'react';
import { AtTabs, AtTabsPane } from 'taro-ui'
import "taro-ui/dist/style/components/tabs.scss";
import style from './index.module.scss'

type ZAtTabsType = {
    children: ReactNode;
    tabList: Array<{ title: string }>
}

const ZAtTabs: FC<ZAtTabsType> = (props) => {
    const { tabList, children } = props
    const [current, setcurrent] = useState(0)
    const handleClick = (value) => {
        setcurrent(value)
    }
    return <View className={style['ZAtTabs']}>
        <AtTabs className={style['atTabs']} current={current} tabList={tabList} onClick={handleClick.bind(this)}>
            {
                Children.map(children, (child, index) => {
                    return (
                        <AtTabsPane current={current} index={index}>
                            {child}
                        </AtTabsPane>
                    )
                })
            }
        </AtTabs>
    </View>
}


export default ZAtTabs